<template>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
      <side-menu ref="sideMenu" accordion :collapsed="collapsed" :menuList="menuList" :active-name="$route.name">
        <div class="logo-con">
          {{$t('m.hòutáiguǎnlǐxìtǒng')}}
          <!--          <img :src="smallLogo" class="logo-small" key="small-logo" v-show="collapsed" />-->
          <!--          <img :src="largeLogo" class="logo-large" key="large-logo" v-show="!collapsed" />-->
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" :menuList="menuList" @on-coll-change="handleCollapsedChange">
          <user :user-avator="userAvator" />
          <fullscreen v-model="isFullscreen" style="margin-right: 15px;" />
          <!--          <span style="margin-right: 15px;font-size: 14px;">-->
          <!--            <Button @click="qie()" style="margin-right: 15px" :size="buttonSize" type="primary" shape="circle">-->
          <!--            {{$t('m.langu')}}-->
          <!--          </Button>{{ managerName }}</span>-->
          <span style="margin-right: 10px">
            <!--             <Select v-model="ClickMy" class="w120 mr10 mb10"  placeholder="Language" >-->
            <Select v-model="ClickMy" :placeholder="placeholder">
              <Option :value="'cn'">中文</Option>
              <Option :value="'en'">Engilsh</Option>
              <Option :value="'vi'">Tiếng việt</Option>
            </Select>

          </span>
          <span style="margin-right: 10px">
            <!-- <Button @click="blacklist" style="background: #c3f0e3;border-radius: 8px;">{{$t('m.hēimíngdāncháxún')}}</Button> -->
            <Button type="warning" @click="changePassword">{{$t('m.changePass')}}</Button>
          </span>
          <span style="font-weight:bolder;margin-right: 15px;font-size: 14px;">{{ managerName }}</span>

        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <Content class="content-wrapper">
            <div class="content-inner">
              <router-view />
            </div>
          </Content>
        </Layout>
      </Content>
    </Layout>
    <Modal class="main_box" v-model="changePasswordModal" :header="false" :title="this.$t('m.changePass')" @on-ok="changePasswordAddEvent" @on-cancel="changePasswordCancelEvent" :mask-closable="false">
      <div slot="footer">
        <Button class="parameter_button" style="margin-right:30px;" @click="changePasswordModal = false" v-if="changePasswordModalType">{{$t('m.cancel')}}</Button>
        <Button class="parameter_button" type="primary" @click="changePasswordAddEvent">{{$t('m.submit')}}</Button>
      </div>
      <Form ref="changePasswordForm" :model="changePasswordForm" :rules="changePasswordFormRules" :label-width="150">
        <FormItem :label="$t('m.yuánmìmǎ') +'：'" prop="oldPassword">
          <Input type="password" :placeholder="$t('m.qǐngshūrù')" v-model.trim="changePasswordForm.oldPassword"></Input>
        </FormItem>
        <FormItem :label="$t('m.xīnmìmǎ') +'：'" prop="newPassword">
          <Input type="password" :placeholder="$t('m.qǐngshūrù')" v-model.trim="changePasswordForm.newPassword"></Input>
        </FormItem>
        <FormItem :label="$t('m.Qǐngzàicìshūrùmìmǎ') +'：'" prop="newPassword">
          <Input type="password" :placeholder="$t('m.qǐngshūrù')" v-model.trim="changePasswordForm.newAgainPassword"></Input>
        </FormItem>
      </Form>
    </Modal>  
  </Layout>
</template>

<script>
import { mapGetters } from 'vuex';
import SideMenu from './side-menu/side-menu';
import HeaderBar from './header-bar';
import User from './user/user';
import Fullscreen from './fullscreen';
import smallLogo from '../../../static/images/logo.png';
import largeLogo from '../../../static/images/logo_large.png';
import menuData from '../../menu/jsadmin.js'

export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Fullscreen,
    User
  },
  data () {
    return {
      changePasswordModal: false,
      changePasswordModalType:true,
      changePasswordForm: {
        oldPassword: '',
        newPassword: '',
        newAgainPassword: '',
      },
      changePasswordFormRules: {
        oldPassword: [
          { required: true, type: 'string', message: this.$t('m.qǐngshūrù') + this.$t('m.yuánmìmǎ'), trigger: 'blur' }
        ],
        newPassword: [
          { required: true, type: 'string', message: this.$t('m.qǐngshūrù') + this.$t('m.xīnmìmǎ'), trigger: 'blur' }
        ],
        newAgainPassword: [
          { required: true, type: 'string', message: this.$t('m.Qǐngzàicìshūrùmìmǎ'), trigger: 'blur' }
        ],
      },
      ClickMy: '',
      managerName: '',
      menuList: [],
      collapsed: false,
      smallLogo,
      largeLogo,
      userAvator: '',
      isFullscreen: false,
      roless: '',
      placeholder: ''
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'peacock',
      'account',
      'avatar',
      'updatePassword'
    ])
  },
  methods: {
    changePassword () {
      this.changePasswordModal = true
      this.changePasswordForm.oldPassword = ''
      this.changePasswordForm.newPassword = ''
    },
    changePasswordAddEvent () {

      this.$refs.changePasswordForm.validate((valid) => {
        if (valid) {
          if (this.changePasswordForm.newPassword == this.changePasswordForm.newAgainPassword) {
            this.$http.post('/api/laocai/sys/account/password/update', {
              oldPassword: this.changePasswordForm.oldPassword,
              newPassword: this.changePasswordForm.newPassword,
            }).then((res => {
              if (res.body.code == 0) {
                this.$Message.success(this.$t('m.changePass') + this.$t('m.chénggōng'));
                setTimeout(() => {
                  this.$router.push('/');
                }, 2000);

              } else {
                this.$Message.warning(res.body.message);
              }
            }));
          } else {
            this.$Message.warning(this.$t('m.liǎcìmìmǎbùyīyàng'));
          }
        } else {
          this.$Message.error(this.$t('m.qǐngshūrù'));
        }
      })


    },
    changePasswordCancelEvent () {

      this.changePasswordModal = false
    },
    blacklist () {
      this.$router.push('/blacklist');
    },
    place () {
      switch (this.$i18n.locale) {
        case 'zh-CN':
          this.placeholder = '中文';

          break;
        case 'en-US':
          this.placeholder = 'Engilsh';

          break;
        case 'yu-VN':
          this.placeholder = 'Tiếng việt';
          break;
      }
    },
    qie () {
      switch (this.ClickMy) {
        case 'cn':
          this.$i18n.locale = 'zh-CN'
          localStorage.setItem("X-LANGUAGE", "zh-CN");
          this.$router.push('/blank');
          break;
        case 'en':
          this.$i18n.locale = 'en-US'
          localStorage.setItem("X-LANGUAGE", "en-US");
          this.$router.push('/blank');
          break;
        case 'vi':
          this.$i18n.locale = 'yu-VN'
          localStorage.setItem("X-LANGUAGE", "yu-VN");
          this.$router.push('/blank');
          break;
      }
    },
    getMenuList () {
      const { name } = this.$route;
      var test = this.roless
      switch (this.$i18n.locale) {
        case 'zh-CN':
          this.menuList = menuData[test + 'cn'];
          break;
        case 'en-US':
          this.placeholder = 'Engilsh';
          this.menuList = menuData[test];

          break;
        case 'yu-VN':
          this.placeholder = 'Tiếng việt';
          this.menuList = menuData[test + 'vn'];
          break;
      }


      this.$nextTick(() => {
        this.$refs.sideMenu.updateOpenName(name);
      });
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    }
  },
  watch: {

    ClickMy: function () {
      this.qie()




    },
    '$route' (newRoute) {
      const { name } = newRoute;
      this.$refs.sideMenu.updateOpenName(name);
    }
  },
  mounted () {
    this.changePasswordModal = this.updatePassword == 1 ? true : false
    this.changePasswordModalType  = this.updatePassword == 1 ? false: true 

    let avatar = this.avatar || 1;
    this.userAvator = require(`../../assets/images/avatar/avatar_${avatar}.png`);
    this.managerName = this.account;
    this.roless = this.roles
    this.getMenuList();
    this.place()
  }
}
</script>

<style lang="scss">
@import "../../static/style.css";
@import "./main.scss";
.main_box{
  .ivu-modal-close {
    display: none;
  }

}
</style>

